<style type="text/css">
    .menuAdd {
    }

    .menuAddTree {
        display: none;
    }

    .menuAddTree .menuName {
        cursor: pointer;
    }
</style>
<div class="toolbar">
    <button type="button" onClick="LC.S.save(menuSave)"><span class="icon-edit"></span> 保存</button>
    <button type="button" onClick="LC.S.save(menuSaveNew)"><span class="icon-plus"></span> 保存并新建</button>
    <button type="button" onClick="menuCancel();"><span class="icon-close"></span> 取消</button>
</div>
<div class="menuAdd">
    <div class="group">
        <div class="label">名　称：</div>
        <div class="value"><input type="text" name="name" regx="${check.name}"/></div>
    </div>
    <div class="group">
        <div class="label">父级菜单：</div>
        <div class="value">
            <input type="hidden" name="parentId" value="${parentId}" nullable/>
            <span class="parentName" onClick="$('.menuAddTree').dialog('open')" title="点击选择父级菜单"></span>
        </div>
    </div>
    <div class="group">
        <div class="label">地　址：</div>
        <div class="value"><input style="width: 400px" type="text" name="url" regx="${check.url}"/></div>
    </div>
    <div class="group">
        <div class="label">优先级：</div>
        <div class="value"><input type="number" name="index" regx="${check.index}"/></div>
    </div>
    <div class="menuAddTree">
        <div id="MENU_ROOT" pid="">
            <span class="menuName" title="">
                <span class="icon-libreoffice"></span>
                <span class="name" onClick="choseParent('');$('.menuAddTree').dialog('close')">根级菜单</span>
            </span>
        </div>
    <#list menus as m>
        <div id="${m._id}" pid="${m.parentId!"MENU_ROOT"}">
            <span class="menuName" title="${m.notes!""}">
                <span class="icon-libreoffice"></span>
                <span class="name" onClick="choseParent('${m._id}');$('.menuAddTree').dialog('close')">${m.name}</span>
            </span>
        </div>
    </#list>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function (e) {
        var menuAddTree = $('.menuAdd .menuAddTree').jTree();
        menuAddTree.showAll();
        $('.parentName').button();
        choseParent('${parentId}');
        dialog('.menuAddTree', {
            autoOpen: false,
            modal: true,
            title: "选择父级菜单"
        });
    });
    function choseParent(pid) {
        if (pid == '') {
            pid = 'MENU_ROOT';
        }
        var parent = $('#' + pid);
        if (parent.length == 0) {
            parent = $('[pid=MENU_ROOT]');
        }
        $('.menuAdd .parentName').children().text(parent.find('.name:first').text());
        if (parent.attr('id') == 'MENU_ROOT') {
            $('input[name=parentId]').val('');
        } else {
            $('input[name=parentId]').val(parent.attr('id'));
        }
    }
    function menuSave(rs) {
        LC.goPage(LC.S.serviceUrl, '.menuLeft', {_act: 'list'});
        LC.goPage(LC.S.serviceUrl, LC.S.PANNEL_DETAIL, {_act: 'detail', id: rs.id});
    }
    function menuCancel() {
        var pid = '${parentId}';
        var act = 'detail';
        if (pid == '') {
            act = 'add';
        }
        LC.goPage(LC.S.serviceUrl, LC.S.PANNEL_DETAIL, {_act: act, id: pid});
    }
    function menuSaveNew() {
        LC.goPage(LC.S.serviceUrl, '.menuLeft', {_act: 'list'});
        var pid = $('input[name=parentId]').val();
        LC.S.add([{name: 'parentId', value: pid}])
    }
</script>